<!DOCTYPE HTML> 
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<script type="text/javascript" src="colordraw.js">
</script>


<script type="text/javascript">

var nihao=color_draw;

function draw()
{
        var canvas = document.getElementById('mycanvas');
        if (canvas.getContext)
        {
                var ctx = canvas.getContext('2d');

                ctx.fillStyle = "rgba(0, 255, 0, 0.1)";
                ctx.fillRect(25,25,40,40);
                //ctx.clearRect(45,45,60,60);
                //ctx.strokeRect(50,50,50,50);

                ctx.beginPath();
                ctx.moveTo(75,50);
                ctx.lineTo(100,75);
                ctx.lineTo(100,25);
                ctx.lineTo(75,50);
                
                
                ctx.moveTo(200, 0);
                ctx.lineTo(200, 100);
                ctx.moveTo(300, 0);
                ctx.lineTo(300, 200);
		ctx.stroke();
                ctx.fill();
		ctx.closePath();
                
		ctx.beginPath();
                //ctx.moveTo(175,175);
                
                ctx.arc(175,175,50,0,Math.PI*2,true);
                ctx.stroke();
                ctx.fill();
		ctx.closePath();
        }
}

function draw_circ()
{
        var canvas = document.getElementById('mycanvas');
        if (canvas.getContext)
        {
                var ctx = canvas.getContext('2d');
                ctx.fillStyle = "rgba(0, 0, 255, 0.1)";
                ctx.beginPath();
                ctx.arc(175,175,40,0,Math.PI*2,true);
                ctx.stroke();
                ctx.fill();
                ctx.closePath();
	}
}

function draw_rect()
{
        var canvas = document.getElementById('mycanvas');
        if (canvas.getContext)
        {
                var ctx = canvas.getContext('2d');
                ctx.fillStyle = "rgba(0, 255, 0, 0.1)";
                //ctx.fillRect(25,25,60,60);
		ctx.beginPath();
		ctx.rect(25,25,60,60);
                ctx.stroke();
                ctx.fill();
		ctx.closePath();
	}
}

function draw_tria()
{
        var canvas = document.getElementById('mycanvas');
        if (canvas.getContext)
        {
                var ctx = canvas.getContext('2d');
                ctx.fillStyle = "rgba(255, 0, 0, 0.1)";
		ctx.beginPath();
                ctx.moveTo(200,50);
		ctx.lineTo(250,120);
		ctx.lineTo(150,120);
		ctx.lineTo(200,50);
		ctx.stroke();
                ctx.fill();
		ctx.closePath();
	}
}

function hello_canvas()
{
	var canvas = document.getElementById('mycanvas');
	if (canvas.getContext)
	{
		var hello = canvas.getContext('2d');
		hello.font = "12pt Arial";
                hello.fillStyle = "rgba(0, 0, 0, 1)";
		hello.fillText("Hello, Canvas!", canvas.width-120, canvas.height-10);
	}
}

function get_xy()
{
	var canvas = document.getElementById('mycanvas');
	if (canvas.getContext)
	{
		var xy = canvas.getContext('2d');
		xy.font = "12pt Arial";
		//var x = xy.
		xy.fillText("Hello, Canvas!", canvas.width-120, canvas.height-380);
	}
}                               
</script>


<style type="text/css">

h1
{
	position : relative;
	left : 45%;
}

canvas
{
        /*height : 400;
	width: 640;*/
        border-top: solid red;
        border-right: solid red;
        border-bottom: solid red;
        border-left: solid red;
}

/*
tr
{
	border : dotted red;
}
*/

</style>
</head>

<body onclick="ChangeColor();">

<h1>Canvas</h1>
<p>
<script type="text/javascript">
<!-- Begin
	var now = new Date();
	var second = now.getSeconds();
	document.write(second);
// End -->
</script>
 The number will change, when the web site reflushed.
<br />
Hello Canvas!
</p>

<div>
<table>
	<tr>
		<td>
		<canvas id="mycanvas" width="640" height="400" onclick="draw();" onmousemove="get_xy();">
		<p>
			<font color="red">your browser does not support the canvas tag!</font><br />
			Please download a new version browser:
			<ul>
				<li><a href="http://www.mozillaonline.com/">Firefox 1.5+</a></li>
				<li><a href="http://www.google.com/chrome/">Chrome 2.0+</a></li>
				<li><a href="http://www.operachina.com/">Opera 9.0+</a></li>
				<li><a href="http://www.apple.com.cn/safari/">Safari 3.0+</a></li>
			</ul>
		</p>
		</canvas>
		</td>
	</tr>
	<tr>
		<td>
		<input type="button" value="Hello canvas" onclick="hello_canvas();" />
		<input type="button" value="draw round" onclick="draw_circ();" />
		<input type="button" value="draw rectangle" onclick="draw_rect();" />
		<input type="button" value="draw triangle" onclick="draw_tria();" />
		</td>
	</tr>
</table>
</div>

<p>
This is my first canvas. The width is:
<script type="text/javascript">

	var canvas = document.getElementById('mycanvas');
	var w = canvas.width;
	var h = canvas.height;
	document.write(w);
	document.write(", the height is: ");
	document.write(h);
	document.write(".");
	nihao();
  //color_draw();

</script>
</p>

</body>
</html>

